<template>
  <div class="BigBox">
    <div class="box">
      <div>浏览渠道</div>
      <div>浏览次数（总）</div>
      <div>分享类型（次）</div>
      <div>浏览时长（总）</div>
      <div>时长明细</div>
      <div>下单次数（总）</div>
      <div>下单明细</div>
    </div>

<!--
    <div class="box">
      <div>公众号</div>
      <div>{{GZHbrowerTimes}}</div>
      <div>公众号文章：{{GZHshareTimes}}</div>
      <div>{{GZHbrowerTime}}</div>
      <div>公众号文章：{{GZHarticleTime}}</div>
      <div>{{GZHbuyTimes}}</div>
      <div>公众号文章：{{GZHarticletimes}}</div>
    </div>

-->

    <div class="box">
      <div>小程序</div>
      <div>{{XCXHbrowerTimes}}</div>
      <div>
        <div style="border-right: none">链接： {{XCXHshareLinkTimes}}</div>
        <div>店铺：{{XCXHshareshop}}</div>
      </div>
      <div>{{XCXbrowerTime}}</div>
      <div>
        <div style="border-right: none">链接：{{XCXHLinkTime}}</div>
        <div>店铺：{{XCXHshopTime}}</div>
      </div>
      <div>{{XCXbuyTimes}}</div>
      <div>
        <div style="border-right: none">链接：{{XCXarlinktimes}}</div>
        <div>店铺：{{XCXarshoptimes}}</div>
      </div>
    </div>


  <!--  <div class="box">
      <div>用户分享</div>
      <div>{{userSharebrowerTimes}}</div>
      <div>链接：{{userShareTypeLink}}</div>
      <div>{{userSharebrowerTime}}</div>
      <div>链接：{{userShareLinkTime}}</div>
      <div>{{userSharebuyTimes}}</div>
      <div>链接：{{userSharearLinktimes}}</div>
    </div>

    <div class="box">
      <div>代理分享</div>
      <div>{{proxySharebrowerTimes}}</div>
      <div>
        <div style="border-right: none">链接： {{proxyShareshareLinkTimes}}</div>
        <div>海报：{{proxySharesharePoster}}</div>
      </div>
      <div>{{proxySharebrowerTime}}</div>
      <div>
        <div style="border-right: none">链接：{{proxyShareLinkTime}}</div>
        <div>海报：{{proxySharePosterTime}}</div>
      </div>
      <div>{{proxySharebuyTimes}}</div>
      <div>
        <div style="border-right: none">链接：  {{proxySharearlinktimes}}</div>
        <div>海报：{{proxySharearpostertimes}}</div>
      </div>
    </div>-->
    <br>
    <br>
  </div>
</template>

<script>

  export default {
    name: "browserAddition",
    props:{
      //30个字段总共  也可以写成数组的形式
      GZHbrowerTimes:{
        type:String
      },
      GZHshareTimes:{
        type:String
      },
      GZHbrowerTime:{
        type:String
      },
      GZHarticleTime:{
        type:String
      },
      GZHbuyTimes:{
        type:String
      },
      GZHarticletimes:{
        type:String
      },

      XCXHbrowerTimes:String,
      XCXHshareLinkTimes:String,
      XCXHshareshop:String,
      XCXbrowerTime:String,
      XCXHLinkTime:String,
      XCXHshopTime:String,
      XCXbuyTimes:String,
      XCXarlinktimes:String,
      XCXarshoptimes:String,
      // 用户分享
      userSharebrowerTimes:String,
      userShareTypeLink:String,
      userSharebrowerTime:String,
      userShareLinkTime:String,
      userSharebuyTimes:String,
      userSharearLinktimes:String,

      proxySharebrowerTimes:String,
      proxyShareshareLinkTimes:String,
      proxySharesharePoster:String,
      proxySharebrowerTime:String,
      proxyShareLinkTime:String,
      proxySharePosterTime:String,
      proxySharebuyTimes:String,
      proxySharearlinktimes:String,
      proxySharearpostertimes:String,
    },
    // 经营报表 汇总
    data() {
      return {

      };
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
  };
</script>

<style scoped lang="less">

  .box{
    width: 100%;
    border: 1px solid #e8e8e8;
    margin: 0 auto;
    display: flex;
    text-align: center;
  }
  /*#e8e8e8*/
  .box div{
    /*height: 40px;*/
    line-height: 37px;
    flex:1;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;

  }
  .box div:last-child{
    border-right:0px solid;
  }
  .box:not(:first-child){
    border-top:none;
  }
  .box:nth-child(odd){
    background-color:	#FFFAFA;
  }

  .box:nth-child(even){
    background-color:	#F5F5F5;
  }
</style>